import { useNamespace } from '@ibiz-template/vue3-util';
import { computed, defineComponent, ref } from 'vue';
import './form-item-container.scss';
import { showTitle } from '@ibiz-template/core';

export const IBizFormItemContainer = defineComponent({
  name: 'IBizFormItemContainer',
  props: {
    required: {
      type: Boolean,
      required: true,
    },
    error: {
      type: String,
    },
    label: {
      type: String,
    },
    labelClass: {
      type: Array<string>,
    },
    labelPos: {
      type: String,
      required: true,
    },
    labelWidth: {
      type: Number,
      default: 130,
    },
    enableInputTip: {
      type: Boolean,
    },
    inputTip: {
      type: String,
    },
    inputTipUrl: {
      type: String,
    },
    inputTipClosable: {
      type: Boolean,
    },
  },
  setup(props) {
    const ns = useNamespace('form-item-container');

    const tooltip = ref();

    const cssVars = computed(() => {
      if (props.labelWidth !== 130) {
        return ns.cssVarBlock({ 'label-width': `${props.labelWidth}px` });
      }
      return {};
    });

    const hiddenTooltip = () => {
      if (tooltip.value) {
        tooltip.value.hide();
      }
    };

    const renderLabel = () => {
      const classList = [ns.e('label'), ...(props.labelClass || [])];
      if (props.enableInputTip) {
        return (
          <el-tooltip
            effect='light'
            offset={4}
            popper-class={ns.e('popper')}
            ref='tooltip'
          >
            {{
              default: () => {
                return <div class={classList}>{props.label}</div>;
              },
              content: () => {
                return (
                  <div class={ns.em('label', 'tooltip')}>
                    {props.inputTip || props.label}
                    {props.inputTipUrl && (
                      <a href={props.inputTipUrl} target='_blank'>
                        {ibiz.i18n.t('component.formItemContainer.more')}
                      </a>
                    )}
                    {props.inputTipClosable && (
                      <ion-icon
                        name='close-circle'
                        onClick={hiddenTooltip}
                      ></ion-icon>
                    )}
                  </div>
                );
              },
            }}
          </el-tooltip>
        );
      }
      return (
        <div class={classList} title={showTitle(props.label)}>
          {props.label}
        </div>
      );
    };
    return { ns, cssVars, tooltip, renderLabel };
  },
  render() {
    // 内容区，包含编辑器和错误消息
    const content = (
      <div
        class={[
          this.ns.e('content'),
          this.ns.em('content', `label-${this.labelPos.toLowerCase()}`),
        ]}
      >
        <div class={[this.ns.e('editor')]}>{this.$slots.default?.()}</div>
        {this.error ? (
          <div title={showTitle(this.error)} class={[this.ns.e('error')]}>
            {this.error}
          </div>
        ) : null}
      </div>
    );

    return (
      <div
        class={[
          this.ns.b(),
          this.ns.m(this.labelPos.toLowerCase()),
          this.ns.is('required', this.required),
          this.ns.is('error', !!this.error),
        ]}
        style={this.cssVars}
      >
        {this.labelPos === 'LEFT' || this.labelPos === 'TOP'
          ? this.renderLabel()
          : null}
        {content}
        {this.labelPos === 'RIGHT' || this.labelPos === 'BOTTOM'
          ? this.renderLabel()
          : null}
      </div>
    );
  },
});
